<template>
	<view class="container" :style="{ marginTop: '60rpx' }">
		<view class="chat-container">
			<view class="chat-header">
				<text class="header-title">"宠小贝"医疗助手</text>
			</view>

			<scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true"
				:style="{ height: scrollViewHeight + 'px' }">
				<view v-for="(message, index) in messages" :key="index" class="message"
					:class="[message.role, 'message-' + message.role]">
					<view class="message-content">
						<text class="message-text">{{ message.content }}</text>
					</view>
				</view>
			</scroll-view>

			<view class="model-switch">
			    <button 
			        class="model-btn" 
			        @tap="toggleModel"
			        :style="{ 
			            backgroundColor: isReasonerModel ? '#409EFF' : '#f0f0f0',
			            color: isReasonerModel ? 'white' : '#666'
			        }"
			    >
			        深度思考
			    </button>
			    <text class="model-text">当前模型: {{ isReasonerModel ? aiModel.reasoner : aiModel.chat }}</text>
			</view>

			<view class="chat-input">
				<input class="input" type="text" v-model="userInput" @confirm="sendMessage" placeholder="请输入消息..."
					:disabled="isLoading" confirm-type="send" />
				<button class="send-btn" @tap="sendMessage" :disabled="isLoading"
					:style="{ backgroundColor: isLoading ? '#c0c4cc' : '#409EFF' }">
					<text v-if="!isLoading">发送</text>
					<text v-else>加载中...</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from "vue";
	import { onLoad } from '@dcloudio/uni-app';

	const aiModel = ref({
		chat: 'deepseek-chat',
		reasoner: 'deepseek-reasoner'
	});

	// 响应式数据
	const messages = ref([
		{ role: "user", content: "你是谁啊" },
		{ role: "assistant", content: "你好！我是一个宠物医院专业的小助手，我叫”宠小贝“，有什么宠物问题或者小常识都可以问我哦" }
	]);
	const userInput = ref("");
	const isLoading = ref(false);
	const isReasonerModel = ref(false);
	const scrollTop = ref(0);
	const scrollViewHeight = ref(0);

	// 生命周期
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync();
		scrollViewHeight.value = systemInfo.windowHeight - 250;
	});

	// 方法
	const toggleModel = async () => {
		uni.showModal({
			title: '提示',
			content: '切换模型会清空当前对话，确认切换吗？',
			success: (res) => {
				if (res.confirm) {
					isReasonerModel.value = !isReasonerModel.value;
					messages.value = [
						{ role: "user", content: "你是谁啊" },
						{ role: "assistant", content: "你好！我是一个宠物医院专业的小助手，我叫”宠小贝“，有什么宠物问题或者小常识都可以问我哦" }
					];
					scrollToBottom();
				}
			}
		});
	};

	const sendMessage = async () => {
		if (!userInput.value.trim() || isLoading.value) return;

		messages.value.push({ role: "user", content: userInput.value });
		const tempInput = userInput.value;
		userInput.value = "";

		try {
			isLoading.value = true;
			const response = await uni.request({
				url: 'https://api.deepseek.com/chat/completions',
				method: 'POST',
				header: {
					'Authorization': `Bearer sk-2a8a7803a3af45508fa2fe6b7d71c38f`,
					'Content-Type': 'application/json'
				},
				data: {
					model: isReasonerModel.value ? aiModel.value.reasoner : aiModel.value.chat,
					messages: messages.value,
					temperature: 0.7
				}
			});

			if (response.statusCode === 200) {
				messages.value.push(response.data.choices[0].message);
			}
		} catch (error) {
			uni.showToast({
				title: '请求失败，请重试',
				icon: 'none'
			});
		} finally {
			isLoading.value = false;
			scrollToBottom();
		}
	};

	const scrollToBottom = () => {
		scrollTop.value = Math.random() * 1000000; // 通过随机数强制触发滚动
	};
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
	}

	.chat-container {
		border: 1rpx solid #e0e0e0;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.chat-header {
		background-color: #f5f5f5;
		padding: 30rpx;
		text-align: center;

		.header-title {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.chat-messages {
		padding: 20rpx;

		.message {
			margin-bottom: 30rpx;
			max-width: 70%;

			&-user {
				margin-left: auto;
				background-color: #409EFF;
				border-radius: 20rpx 20rpx 0 20rpx;
			}

			&-assistant {
				margin-right: auto;
				background-color: #f3f4f5;
				border-radius: 20rpx 20rpx 20rpx 0;
			}

			.message-content {
				padding: 20rpx;

				.message-text {
					font-size: 28rpx;
					line-height: 1.5;
					color: #333;
				}
			}
		}
	}

	.model-switch {
	    padding: 20rpx;
	    display: flex;
	    align-items: center;
	    gap: 20rpx;
	    
	    .model-btn {
	        margin: 0;
	        padding: 0 30rpx;
	        height: 60rpx;
	        line-height: 60rpx;
	        border-radius: 8rpx;
	        font-size: 26rpx;
	        transition: all 0.3s;
	        
	        &::after {
	            border: none;
	        }
	    }
	
	    .model-text {
	        font-size: 26rpx;
	        color: #666;
	    }
	}
	.chat-input {
		padding: 20rpx;
		display: flex;
		gap: 20rpx;
		background-color: #f8f9fa;

		.input {
			flex: 1;
			padding: 20rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			font-size: 28rpx;
		}

		.send-btn {
			padding: 0 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			border-radius: 8rpx;
			font-size: 28rpx;

			&::after {
				border: none;
			}
		}
	}
</style>